import React,{ useState ,useEffect} from 'react'
import './App.css'
// jsx 对象 React.createElement('div',{className:'hello','Hello World})
//React.createElement('h1',null,'Hello')
// 1. jsx 优秀 且简单的UI 表达创新
// 2. jsx -> babel ->转义 React.createElement()
// index
// 状态 自有 useState 响应式 但是一般建议放在父组件中
// 便于多个子组件共享数据
// 子组件里 props 参数对象的
// 子组件里不要去添加自有状态，外界不同步，除非外界不要用
const Hello =() =><div>Hello World!</div>;
console.log(Hello);
const Header =() => {
  return (
    <header>
      <Title title = '首页'/>
    </header>
  )
}
const Title = (props) => {
  const {title} = props
  return (
    // <div>{props.title}</div>
    <div>title</div>
  )
}
const Main = ({users}) => {
  // props ? users

  return (
    <div>
      Main
      <ul>
        {/* uniq  */}
      {users.map(user =><li key ={user.id}>{user.name} -{user.age}</li>)}
      </ul>
    </div>
  )
}
const Footer = ({count}) => {
  return (
   <footer>
      Footer 有{count}用户
    </footer>
  )
}
const Index =() => {
  // 不是用useState 数据绑定 且响应
  // 不够格成为状态
  // 状态 响应式的
  // state 自有的 父组件
  const [users,setUsers] = useState([{
    name: 'gch',
    age: '18',
    id:0
  },
  {
    name: 'lwb',
    age: '19',
    id:1
   },
   {
    name: 'mary',
    age: '19',
    id:2
   },
  ]);
  // 生命周期函数 onload onDOMContentLoaded
  //  component useEffect onDOMContentLoaded 组件
  useEffect(()=>{
    console.log('组件已经加载好了')
    setTimeout(()=> { 
    setUsers([...users,{
      name:'kunkun',
      age:24,
      id:3
    }])
  },2000)
  },[])
  // setTimeout(()=> {
    // users.push({
    //   name:'kunkun',
    //    age:24,
    //   id:3})
    //   setUsers(users)

  //   setUsers([...users,{
  //     name:'kunkun',
  //     age:24,
  //     id:3
  //   }])
  // },1000)
  return (
    <>
      {/* 如果唯一的父元素只起到包裹作用，而不需要标签，可以省略 */}
      <Header></Header>
      <Main users={users}></Main>
      <Footer count={users.length}></Footer>
    </>
  )
}
function App() {
  

  return (
    <Index></Index>
    //<Hello></Hello>
  //  React.createElement('div',null,'hello world')
  )
}

export default App
